<template>
    <div>
        <div>
            <h1>尺子3</h1>
            <el-form label-width="100px" >
                <el-form-item label="刻度：">
<!--                    <span v-show="showAnswer">{{v1}}</span> <el-button type="primary" @click="() => { showAnswer = !showAnswer}">{{showAnswer ? '隐藏' : '显示'}}</el-button>-->
                    <el-input-number v-model="nowNum" :min="1" :max="100" :step="1" @change="changeNowNum" ></el-input-number>
                </el-form-item>
            </el-form>
        </div>
        <div ref="ruler1">
            <cs-ruler v-if="showRuler" @post-NumValue="rulerNum" :NowNum='nowNum' :maxNum='100' :minNum='0' :ruleWidth='100' ></cs-ruler>
        </div>
    </div>
</template>
<!--https://python.ctolib.com/328921371-ruler.html-->
<script>
    export default {
        name: "ruler",
        components: {

        },
        data () {
            return {
                showRuler: true,
                v1: 2,
                nowNum: 5,
                showAnswer: false,
            }
        },
        mounted () {

        },
        methods: {
            //子组件传递刻度表
            rulerNum(value){
                this.v1 = value
                this.nowNum = value
            },
            changeNowNum() {
                this.showRuler = false
                this.$nextTick(() => {
                    this.showRuler = true
                })
            },
        }
    }
</script>

<style scoped>

</style>
